<template>
	<view class="geryTheme">
		<page-title Theme="geryTheme" class="cal">图书详情</page-title>
		<view class="flex align-center py-2 cal" style="height: 250rpx;">
			<image class="flex-1 mx-2 rounded" :src="currentBook.imgurl" mode="widthFix" lazy-load></image>
			<view class="flex-2 mx-2">
				<view style="font-size: 45rpx;">{{currentBook.name}}</view>
				<view class="font mt-1">作者：{{currentBook.author}}</view>
				<view class="flex align-center mt-2">
					<button class="flex-1 mx-1">分享</button>
					<button class="flex-1 mx-1" @tap="collectThisBook">{{this.collectStatus? '已收藏': '收藏'}}</button>
				</view>
			</view>
		</view>

		<view class="shadow bg-white">
			<tab-top :tabArr="['详情', '目录']" :tabIndex="tabIndex" @changeTabIndex="changeTabIndex" class="cal"></tab-top>

			<!-- 具体内容 -->
			<swiper :style="{height: `${calHeight}rpx`}" :current="tabIndex" @change="swiperChangeIndex">
				<!-- 详情 -->
				<swiper-item>
					<scroll-view scroll-y :style="{height: `${calHeight}rpx`}">
						<view>
							<view class="py-2 flex justify-center text-light-black">——简介——</view>
							<view class="px-2 font-lg" style="line-height: 80rpx;"> {{currentBook.synopsis}} </view>
						</view>
					</scroll-view>
				</swiper-item>

				<!-- 目录 -->
				<swiper-item>
					<scroll-view scroll-y :style="{height: `${calHeight}rpx`}">
						<block v-for="item in chapterCatalog" :key="item.id">
							<view hover-class="bg-light" class="p-2 text-ellipsis border-bottom"
								@tap="toReadingPage(item.id)"> {{item.title}} </view>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import PageTitle from '@/components/pageTitle.vue'
	import tabTop from '@/components/tabTop.vue';
	import test from '@/common/test.js';
	import $U from '@/common/unit';

	let collectedBooks = getApp().globalData.collectedBooks;
	export default {
		data() {
			return {
				calHeight: 0,
				tabIndex: 0,
				collectStatus: false,
				currentBook: {
					name: test.name,
					author: test.author,
					synopsis: test.synopsis,
					imgurl: ''
				},
				chapterCatalog: []
			}
		},
		components: {
			PageTitle,
			tabTop
		},
		methods: {
			changeTabIndex(tabIndex) {
				this.tabIndex = tabIndex;
			},
			swiperChangeIndex(e) {
				this.tabIndex = e.detail.current;
			},
			toReadingPage(id) {
				uni.navigateTo({
					url: `/pages/reading/reading?chapterID=${id}`
				})
			},
			collectThisBook() {
				this.collectStatus = !this.collectStatus;
				uni.showToast({
					icon: 'none',
					title: this.collectStatus ? '已收藏' : '取消收藏成功'
				})
				let index = collectedBooks.findIndex(item => item.id === this.currentBook.id);
				this.collectStatus? collectedBooks.push(this.currentBook) : collectedBooks.splice(index, 1);
			}
		},
		async onLoad(param) {
			let currentBookID = Number(param.bookID);
			let {list} = await this.$http.get("/book");
			this.currentBook = list.find(item => item.id === currentBookID) || {};
			let index = collectedBooks.findIndex(item => item.id === currentBookID);
			this.collectStatus = index >= 0;
			let {chapterCatalog} = await this.$http.get("/testSynopsis");
			this.chapterCatalog = chapterCatalog;
		},
		mounted() {
			$U.calSurplusHeight({
				pageID: this,
				pos: 'cal',
				success: val => this.calHeight = val
			})
		},
	}
</script>
